<template>
  <button
  ref="buttonRef"
  class="sc-btn"
  @click.capture.stop="clickFun"
  :class="{
    [`sc-btn--${type}`]:Boolean(type),
    [`sc-btn--${size}`]:Boolean(size),
    'is-plain':plain,
    'is-round':round,
    'is-circle':circle,
    'is-disabled':disabled,
    'is-autoFocus':autoFocus,
    'is-loading':loading
  }"
  :disabled="disabled || loading"
  :autofocus="autoFocus"
  :type="nativeType"
  >
    <ScIcon icon="spinner" spin v-if="loading"></ScIcon>
    <ScIcon :icon="icon" v-if="icon" ></ScIcon>
    <span><slot></slot></span>
  </button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name:"SCButton"
});
</script>
<script setup lang="ts">
// 引入图标组件
import ScIcon from '../theIcon/ScIcon.vue';
// 引入接口类型
import type {ButtonProps,ButtonEmits} from './types';
// 获取props
withDefaults(defineProps<ButtonProps>(),{
  type:"info",
  size:"middle",
  plain:false,
  round:false,
  circle:false,
  disabled:false,
  autoFocus:false,
  nativeType:"button",
  loading:false,
  icon:''
});
// 定义事件
const emits = defineEmits<ButtonEmits>();
// 定义点击事件回调
function clickFun($event:MouseEvent){
  emits("clickEmits",{
    $event:$event
  });
}
</script>

<style scoped>
@import "./newStyle.min.css";
</style>
